<template>
  <div class="finger">
    <div class="fingerbox">
      <n-icon size="300" class="icon" color="blue" :depth="num">
        <FingerPrint />
      </n-icon>
      <van-button type="primary" @click="againGetFinger" class="btn">
        开始识别指纹
      </van-button>
    </div>
  </div>
</template>

<script>
import { FingerPrint } from "@vicons/ionicons5";
import { onUnmounted, ref, reactive, toRefs } from "vue";
import { useMessage } from "naive-ui";
import useSocket from "@/utils/websocket.js";
import { addFinger } from "@/api/finger.js";
import { useRoute, useRouter } from "vue-router";

export default {
  components: {
    FingerPrint,
  },
  setup() {
    const num = ref(5);
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      data: {
        unitGroup: "",
        userGroup: "",
        realName: "",
        faceId: "",
      },
    });
    const message = useMessage();
    const { ws } = useSocket(
      "ws://localhost:8888/websocket",
      function handleMessage(e) {
        const val = e.data;
        num.value -= 2;
        message.success(val);
      }
    );
    console.log(
      "%c 🍟 ws: ",
      "font-size:20px;background-color: #E41A6A;color:#fff;",
      ws
    );
    const againGetFinger = async () => {
      const res = await addFinger(route.params.id);
      console.log(
        "%c 🥒 res: ",
        "font-size:20px;background-color: #FFDD4D;color:#fff;",
        res
      );
      if (res.status != 200) {
        message.error("注册指纹失败");
        return;
      }
      message.success("指纹注册成功！！即将返回首页！");
      router.push("/");
    };
    // const send = () => {
    //   sendMsg("yay");
    // };

    onUnmounted(() => {
      ws.close();
    });
    return {
      ...toRefs(state),
      againGetFinger,
      num,
    };
  },
};
</script>

<style lang="scss">
.finger {
  width: 100%;
  height: calc(100% - 130px);
  display: flex;
  justify-content: space-around;
  align-items: center;
  .fingerbox {
    width: 300px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .btn {
      margin-top: 35px;
    }
  }
}
</style>
